<template>
  <div class="head">
    <el-container style="height:100%">  
        <el-container>
          <el-header>
            <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo "
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
                <el-menu-item>
                  <span class="f1">
                    学生选课系统
                  </span>
                </el-menu-item >
                <el-menu-item @click="clickMenu(item)" v-for="item in menu" :index="item.path" :key="item.path">
                  <i :class="'el-icon-'+item.icon"></i>
                  <span>{{item.label}}</span>
                </el-menu-item>
                <el-dropdown>
                    <span style="color:#fff;font-size:20px;align-item:center">
                      {{name}}
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="UserMessage()">个人中心</el-dropdown-item>
                        <el-dropdown-item @click.native="exitLogin()">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-menu>
          </el-header>
            <el-main>
              <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
      
  </div>
</template>

<script>
import VueCookie from 'vue-cookie';
export default {
  props:['name','code','optionsM'],
  components: {
  },
  data() {
    return {
        menu:[
        {
          path: '/course',
          name: 'course',
          label: '课程',
          icon: 'guide',
          url: 'course/course '
        },{
          path:'/achievement',
          name:'achievement' ,
          label: '成绩',
          icon:'video-camera-solid' ,
          url: 'achievement/achievement '
        },
        {
          path:'/selectCourse',
          name:'selectCourse' ,
          label: '所选课程',
          icon:'notebook-2' ,
          url: 'selectCourse/selectCourse'
        }
      ]
    };
  },
  computed: {
  },
  watch: {
  },
  created() {
      
  },
  methods: {
    clickMenu(item){
      this.$router.push({
        name:item.name,
        params:{
          name:this.name,
          code:this.code,
          optionsM:this.optionsM
        }
      })
    },
      exitLogin(){
          VueCookie.delete('name')
          this.$router.replace({
              name:'login'
          })
      },
      UserMessage(){
        console.log(this.optionsM)
        this.$router.push({
              name:'userMessage',
              params:{
                name:this.name,
                code:this.code,
                optionsM:this.optionsM
              }
          })
      }
  },
  mounted(){

  }
};
</script>
<style scoped lang="less">
.div{
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
  }
  .f1{
    font-size: 20px;
  }
  .el-dropdown{
    float: right;
    margin-top: 5px;
    margin-right: 50px;
  }
  .el-menu-demo{
    width: 100%;
  }

</style>